<template>
  <div class="footer" :style="{backgroundImage: 'url(' + bg + ')' }">
    <div class="footer-f">
      <div class="footer-left">
        <img class="footer-logo" src="@/assets/img/f_logo.png" alt />
        <div class="footer-address">
          <p>
            <img src="@/assets/img/f-phone.png" alt />
            <span>{{footerObj.phone}}</span>
          </p>
          <p>
            <img src="@/assets/img/f-email.png" alt />
            <span>{{footerObj.email}}</span>
          </p>
          <p>
            <img src="@/assets/img/f-address.png" alt />
            <span>{{footerObj.address}}</span>
          </p>
        </div>
      </div>
      <div class="footer-code">
        <p>
          切换至：
          <span @click="changeType">{{c_type}}</span>
        </p>
        <img src="@/assets/img/f_code.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import { getContact } from "@/api/index";
export default {
  props: {
    type: {
      default: 0
    }
  },
  data() {
    return {
      footerObj: {},
      bg: require("@/assets/img/home.png")
    };
  },
  computed: {
    c_type() {
      return this.type == 0 ? "商用" : "零售";
    }
  },
  created() {
    let hasContact = sessionStorage.getItem("contact");
    if (hasContact) {
      this.footerObj = JSON.parse(hasContact)
    } else {
      this.setContact()
    }
  },
  methods: {
    changeType() {
      let type = this.type == 0 ? 1 : 0;
      this.$emit("changeType", type);
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      type==0 ? this.$router.push({path:'/index',query:{type:0}}) : this.$router.push({path:'/index',query:{type:1}})
    },
    setContact() {
      getContact().then(res => {
        const { code, msg, data } = res;
        if (code == 200) {
          this.footerObj = data.rows;
          sessionStorage.setItem("contact", JSON.stringify(data.rows));
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  background: no-repeat;

  .footer-f {
    padding: 0.54rem 0.25rem;
    display: flex;
    justify-content: space-between;
  }

  .footer-logo {
    display: block;
    width: 2rem;
    margin-bottom: 0.3rem;
  }

  .footer-address {
    img,
    span {
      vertical-align: middle;
    }

    img {
      display: inline-block;
      width: 0.27rem;
    }

    span {
      color: #979797;
      margin-left: 0.09rem;
      font-size: 0.25rem;
    }
  }

  .footer-code {
    text-align: right;

    p {
      margin-bottom: 0.4rem;
      color: #979797;
      font-size: 0.25rem;

      span {
        display: inline-block;
        color: #fff;
        width: 0.9rem;
        height: 0.45rem;
        line-height: 0.45rem;
        text-align: center;
        background: #2e2e2e;
      }
    }

    img {
      display: inline-block;
      width: 1.2rem;
    }
  }
}
</style>
